<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>预约名医</title>
    <!-- Path to Framework7 Library CSS-->
    <link rel="stylesheet" href="../css/framework7.ios.min.css">
    <link rel="stylesheet" href="../css/framework7.ios.colors.min.css">
    <!-- Path to your custom app styles-->
    <link rel="stylesheet" href="../css/my-app.css">
    <link rel="stylesheet" href="../css/ekang.css"/>
    <style type="text/css">
        .hospital_img {
            position: absolute;
            width: 54px;
            height: 54px;
            border-radius: 4px;
            left: 10px;
            top: 10px;
            z-index: 0;
        }

        .hospital_name {
            position: absolute;
            font-size: 14px;
            color: #333333;
            top: 10px;
            left: 70px;
            font-weight: bold;
            /*width: 80%;*/
        }

        .hospital_name span {
            position: absolute;
            width: 33px;
            height: 16px;
            line-height: 16px;
            font-size: 12px;
            background-color: #f95e64;
            color: white;
            text-align: center;
            border-radius: 3px;
        }

        .hospital_subContent {
            position: absolute;
            font-size: 12px;
            color: #808080;
            left: 70px;
            top: 30px;
        }

        .hospital_subContent span {
            position: absolute;
            font-size: 12px;
            color: #333333;
            width: 300px;
        }

        li {
            width: 100%;
            height: 50px;
            margin-top: 10px;
            background-color: #fff;
            border-top: 1px solid #dddddd;
            border-bottom: 1px solid #dddddd;
            list-style-type: none;
        }

        .li-title {
            position: absolute;
            color: #333333;
            font-size: 14px;
            left: 12px;
            line-height: 50px;
            /*font-weight: bold;*/
        }

        #nures_time ::-webkit-input-placeholder { color: #333333;text-align: right }

        ::-webkit-input-placeholder { color: #b3b3b3;}
        input:-moz-placeholder { color: #b3b3b3; }

        .li-text {
            position: absolute;
            color: #b3b3b3;
            border: none;
            outline: none;
            font-size: 15px;
            line-height: 45px;
            right: 0;
            width: 60%;
            text-align: right;
            background-color: rgba(102, 102, 102, 0);
        }

        .li-title-detail {
            position:absolute;
            color: #b3b3b3;
            border: none;
            outline: none;
            font-size: 15px;
            right: 0;
            text-align: left;
            /*background-color:#009688;*/
            width: 94%;
            height: 79px;
            left: 10px;
            top: 5px;
        }

        .icon-right {
            background: url(../img/right_24.png) no-repeat 98% center transparent;
            background-color: #fff;
            background-size: 12px 12px;
        }

        .tabs-choose {
            /*height: 50px;*/
            line-height: 50px;
            position: absolute;
            background-color: #ffffff;
            right: 25px;
            color: #333333;
        }

        .tabs-choose div {
            background-origin: content-box;
            font-size: 14px;
            text-align: right;
        }

    </style>
</head>
<body>

<div class="views tabs toolbar-through">
    <!--导航条-->
    <!-- Second view (for second wrap)-->
    <div id="view" class="view view-main tab active">
        <!-- We can make with view with navigation, let's add Top Navbar-->
        <div class="navbar">
            <div class="navbar-inner" style="background-color: #38a16d">
                <div class="left" id="back">
                    <a href="#" class="back link">
                        <i class="icon icon-back color-white" style="color: white"></i>
                        <span style="color: white">返回</span>
                    </a>
                </div>
                <div class="center sliding" style="color: white">预约名医</div>
            </div>
        </div>

        <div class="pages navbar-through">
            <div data-page="index-2" class="page page-on-center">
                <div class="page-content">
                    <div>
                        <div style="position:relative;background-color:#fff;width: 100%;height: 74px;border-bottom: 1px solid #e6e6e6">
                            <img id="hospital_pic" src="" alt="头像" class="hospital_img"/>
                            <img id="hospital_pic_hu" src="../img/nurse_img/hu.png" alt="头像" class="hospital_img" style="width:29px;height: 29px;z-index: 1;"/>
                            <div id="hopital_name" class="message hospital_name"><span id="hospital_type"></span></div>
                            <div class="message hospital_subContent">科室：<span id="hospital_departments"></span></div>
                            <div class="message hospital_subContent" style="top: 50px;">类型：<span id="hospital_nurse"></span></div>
                        </div>
                        <ui>
                            <li id="creat-picker">
                                <span class="li-title">就诊时间</span>
                                <!--<input placeholder="点击选择" type="text" id="nures_time" class="tabs-choose text-center" style="text-align:right;border: none;background-color: rgba(0, 0, 0, 0)">-->
                                <div id="doctorTime" class="tabs-choose text-center"></div>
                            </li>
                            <li class="icon-right" id="choosePeople">
                                <span class="li-title">就诊患者</span>
                                <div id="user_name" class="tabs-choose text-center">点击选择</div>
                            </li>
                            <li>
                                <span class="li-title">备用联系人</span>
                                <input type="number" id="mobile" placeholder="请输入备用联系人手机号" class="li-text"/>
                            </li>
                            <li>
                                <span class="li-title">陪诊服务（<span id="severMoney"></span>元/次，全天陪诊）</span>
                                <label class="label-switch" style="position:absolute;right: 10px;margin-top:9px">
                                    <input type="checkbox">
                                    <div id="severChoose" class="checkbox"></div>
                                </label>
                            </li>
                            <li>
                                <span class="li-title">专车接驾（<span id="carMoney"></span>元/次，接驾到医院）</span>
                                <label class="label-switch" style="position:absolute;right: 10px;margin-top:9px">
                                    <input type="checkbox">
                                    <div id="carCheck" class="checkbox"></div>
                                </label>
                            </li>
                            <li class="icon-right">
                                <span class="li-title">诊疗金</span>
                                <div id="diagnosis_money"  class="tabs-choose text-center">点击选择</div>
                            </li>
                            <li style="position:relative;height: 89px">
                                <textarea id="diseaseText" class="li-title-detail" placeholder="请简单的描述患者的病情或就诊经历"></textarea>
                            </li>
                        </ui>
                        <p class="message" style="font-size: 12px;color: #999999"><span style="font-size: 13px;color: rgb(102, 102, 102)">服务说明</span>服务费不包含挂号费，挂号费我们的工作人员会为您垫付，在您取号的时候，需要支付挂号费用，挂号费用和医院的标准是一样的，不会额外收取其他费用。如果出现多收取您的费用，请及时联系我们，一定严肃处理。不让您承担任何损失~</p>
                        <br/>
                    </div>

                </div>
            </div>
        </div>
        <div style="position: fixed;display: flex;height: 49px;width: 100%;background-color: #393d3b;bottom: 0">
            <div style="position: absolute;left: 10px;line-height: 49px;font-size: 13px;color: #fff">服务费：<span id="money_num">999</span>元</div>
            <div id="submitOrder" style="position: absolute;right: 0;width: 105px;height: 49px;background-color: #26d086;font-size: 16px;color: #fff;text-align: center;line-height: 49px">立即预约</div>
        </div>
    </div>

</div>
<script type="text/javascript" src="../js/framework7.min.js"></script>
<script type="text/javascript" src="../js/my-app.js"></script>
<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/jquery.cookie.js"></script>
<script src="../js/ekang.js"></script>
<script>
    $(function () {
        // 获取上一界面数据
        var day = getQueryString("day");
        var time = getQueryString("time");
        var am = getQueryString("am");
        // 获取参数值
        var hospital_id = decodeURIComponent($.getParam("hospital_id"));
        var department_id = decodeURIComponent($.getParam("department_id"));
        var doctor_id = decodeURIComponent($.getParam("doctor_id"));

        // 诊疗金数据
        var diagName;
        var diagId;

        var sever = 0;
        var car = 0;

        var severNum;
        var carNum;

        if(am == 1){
            $('#doctorTime').html("2016-"+time+" 上午");
        }else{
            $('#doctorTime').html("2016-"+time+" 下午");
        }


        $('#severChoose').on('click', function () {
            if($('input[type="checkbox"]')[0].checked == false){
                $('#money_num').html(parseInt($('#money_num').text())+severNum);
                $.cookie("sever", "1", { expires: 7,path: '/' });
                sever = 1;
            }else{
                $('#money_num').html(parseInt($('#money_num').text())-severNum);
                $.cookie("sever", "0", { expires: 7,path: '/' });
                sever=0;
            }
        });
        $('#carCheck').on('click', function () {
            if($('input[type="checkbox"]')[1].checked == false){
                $('#money_num').html(parseInt($('#money_num').text())+carNum);
                $.cookie("car", "1", { expires: 7,path: '/' });
                car = 1;
            }else{
                $('#money_num').html(parseInt($('#money_num').text())-carNum);
                $.cookie("car", "0", { expires: 7,path: '/' });
                car = 0;
            }
        });

        // 用户
        if($.cookie("username")){
            $('#user_name').html($.cookie("username"));
        }

        if($.cookie("severMoney")){
            var money = $.cookie("severMoney");
            $('#money_num').html(money);

            // 删除本地保存
            $.cookie('severMoney', "", { expires: 7,path: '/' });
        }

        // 诊疗金
        if($.cookie("dia_name")){
            diagName = $.cookie("dia_name");
            diagId = $.cookie("dia_id");
            $('#diagnosis_money').html(diagName+"元诊疗金");
            $('#money_num').html(parseInt($('#money_num').text())-parseInt(diagName));
            // 删除本地保存
//            $.cookie('dia_name', "", { expires: 7,path: '/' });
//            $.cookie('dia_id', "", { expires: 7,path: '/' });
        }else{
            $('#diagnosis_money').html();
        }

        $('#diagnosis_money').on('click', function () {
//            alert($('#money_num').text());
            var  money;
            if(diagName){
                money = parseInt($('#money_num').text())+parseInt(diagName);
            }else{
                money = $('#money_num').text();
            }
            $('#money_num').html(money);

            location.href = "../myCenter/diagnosis_money.html?allMoney="+money;
        });

        var app = {
            subOrder: function () {
                $.ajax({
                    type: 'POST',
                    url: textUrl + '/diagnosis/submitOrder/',
                    data: {         // 需要于客户端同步
//
                        family_id : $.cookie("userId"),
                        hospital_id : hospital_id,
                        department_id : department_id,
                        appointment_type : '4',
                        doctor_id : doctor_id,
                        type : '1',
                        uid : $.cookie("local_userId"),
                        appointment_time: $.myTime.DateToUnix("2016-"+time),
                        mobile : $('#mobile').val(),
                        day_time : am,
                        car_on : car,
                        diagnosis_on : sever,
                        coupon_id : diagId,
                        disease : $('#diseaseText').val()
                    },
                    dataType: 'jsonp',
                    jsonp: 'callback',
                    success: function (result) {
                        if (result.ret == 0) {

                            $.cookie('sever', "", { expires: 7,path: '/' });
                            $.cookie('car', "", { expires: 7,path: '/' });

                            var order = result.data.order_id;
                            location.href = "../hospital_nurse/nurse_payorder.html?order_id="+order;
                        } else {
                            alert(result.msg);
                        }
                    }
                });
            },
            getPrice: function () {
                $.ajax({
                    type: 'GET',
                    url: textUrl + '/diagnosis/getPrice/',
                    data: {         // 需要于客户端同步
                        hospital_id : hospital_id,
                        department_id : department_id,
                        appointment_type : '4',
                        doctor_id : doctor_id,
                        type : '1',
                        uid : $.cookie("local_userId")
                    },
                    dataType: 'jsonp',
                    jsonp: 'callback',
                    success: function (result) {
                        if (result.ret == 0) {
                            var hospitalData = result.data.header_info;
                            $('#hospital_pic').attr('src',hospitalData.pic);
                            $('#hopital_name').html(hospitalData.hospital_name);
                            $('#hospital_type').html(hospitalData.type_text);
                            $('#hospital_departments').html(hospitalData.department_name);
                            $('#hospital_nurse').html(hospitalData.product_type_text);
                            $('#carMoney').html(result.data.car_price);
                            $('#severMoney').html(result.data.nurse_price);
                            $('#money_num').html(result.data.doctor_price);

                            severNum = result.data.nurse_price;
                            carNum = result.data.car_price;

                            // 诊疗金
                            if($.cookie("dia_name")){
                                diagName = $.cookie("dia_name");
                                diagId = $.cookie("dia_id");
                                $('#diagnosis_money').html(diagName+"元诊疗金");
                                $('#money_num').html(parseInt($('#money_num').text())-parseInt(diagName));
                                // 删除本地保存
                                $.cookie('dia_name', "", { expires: 7,path: '/' });
                                $.cookie('dia_id', "", { expires: 7,path: '/' });
                            }else{
                                $('#diagnosis_money').html();
                            }

                            if($.cookie("sever") == 1){
                                $('#money_num').html(parseInt($('#money_num').text())+severNum);
                            }
                            if($.cookie("car") == 1){
                                $('#money_num').html(parseInt($('#money_num').text())+carNum);
                            }

                        } else {
                            alert(result.msg);
                        }
                    }
                });
            }
        };

        app.getPrice();


        $('#submitOrder').on('click', function () {

            if($('#mobile').val().length == 0){
                alert("请输入备用联系人手机号");
                return;
            }
            if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test($('#mobile').val()))){
                alert("请输入正确的手机号");
                document.mobileform.mobile.focus();
                return false;
            }
            if($('#diseaseText').val().length == 0){
                alert("请输入患者病情");
                return;
            }
            app.subOrder();
        });

        $('#choosePeople').on('click', function () {
            location.href = "../addPeople/contactPeople.html"
        });


        
        // 声明f7
        var myApp = new Framework7();
        var $$ = Dom7;
        // 选择日期
        var today = new Date();

        //-----------------陪诊时间
//        $$('#creat-picker').on('click', function () {
//
//            if ($$('.picker-modal.modal-in').length > 0) {
//                myApp.closeModal('.picker-modal.modal-in');
//            }
//            myApp.pickerModal(
//                    '<div class="picker-modal" id="content-picker">' +
//                    '<div class="toolbar">' +
//                    '<div class="toolbar-inner">' +
//                    '<div class="left"></div>' +
//                    '<div class="right"><a href="#" class="close-picker">关闭</a></div>' +
//                    '</div>' +
//                    '</div>' +
//                    '<div class="picker-modal-inner">' +
//                    '<div class="content-block">' +
//                        // 数据
//                    '<div class="time-content" style="margin-top: -20px">'+
//                    '</div>'+
//
//                    '</div>' +
//                    '</div>' +
//                    '</div>'
//            )
//
//            var pickerInline = myApp.picker({
//                input: '#nures_time',
//                container: '.time-content',
//                toolbar: false,
//                rotateEffect: true,
//
//                value: [today.getFullYear(),today.getMonth(), today.getDate(),  today.getHours(), (today.getMinutes() < 10 ? '0' + today.getMinutes() : today.getMinutes())],
//
//                onChange: function (picker, values, displayValues) {
//                    var daysInMonth = new Date(picker.value[2], picker.value[0]*1 + 1, 0).getDate();
//                    if (values[1] > daysInMonth) {
//                        picker.cols[1].setValue(daysInMonth);
//                    }
//                },
//
//                formatValue: function (p, values, displayValues) {
//                    return displayValues[0] + ' ' + values[1] + ', ' + values[2] + ' ' + values[3] + ':' + values[4];
//                },
//
//                cols: [
//                    // Years
//                    {
//                        values: (function () {
//                            var arr = [];
//                            for (var i = 1950; i <= 2030; i++) { arr.push(i); }
//                            return arr;
//                        })(),
//                    },
//                    // Months
//                    {
//                        values: ('0 1 2 3 4 5 6 7 8 9 10 11').split(' '),
//                        displayValues: ('1 2 3 4 5 6 7 8 9 10 11 12').split(' '),
//                        textAlign: 'left'
//                    },
//                    // Days
//                    {
//                        values: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],
//                    },
//                    // Space divider
//                    {
//                        divider: true,
//                        content: '  '
//                    },
//                    // Hours
//                    {
//                        values: (function () {
//                            var arr = [];
//                            for (var i = 0; i <= 23; i++) { arr.push(i); }
//                            return arr;
//                        })(),
//                    },
//                    // Divider
//                    {
//                        divider: true,
//                        content: ':'
//                    },
//                    // Minutes
//                    {
//                        values: (function () {
//                            var arr = [];
//                            for (var i = 0; i <= 59; i++) { arr.push(i < 10 ? '0' + i : i); }
//                            return arr;
//                        })(),
//                    }
//                ]
//            });
//
//            pickerInline;
//        });

        $('#back').on('click', function () {
            $.cookie('sever', "", { expires: 7,path: '/' });
            $.cookie('car', "", { expires: 7,path: '/' });
            history.back();
        });
    });
</script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript"></script>
<script src="../js/weixin2.js"></script>
</body>
</html>